---
title: Particles
date: 2024-02-01
description: Particles are a fun way to add some visual flair to your website. They can be used to create a sense of depth, movement, and interactivity.
author: dillionverma
published: false
video: https://cdn.magicui.design/particles.mp4
---

<ComponentPreview name="particles-demo" />

<Steps>

<Step>

## Installation

Copy and paste the following code into your project.

```typescript
// lib/utils.ts
import clsx, { ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}
```

```text
components/magicui/particles.tsx
```

<ComponentSource name="particles" />

</Step>

</Steps>

## Props

| Prop      | Type    | Description                      | Default |
| --------- | ------- | -------------------------------- | ------- |
| className | string  | The class name for the component | -       |
| quantity  | number  | The number of particles          | 100     |
| staticity | number  | The staticity of the particles   | 50      |
| ease      | number  | The ease of the particles        | 50      |
| size      | number  | The size of the particles        | 0.4     |
| refresh   | boolean | Whether to refresh the particles | false   |
| color     | string  | The color of the particles       | #ffffff |
| vx        | number  | The x velocity of the particles  | 0       |
| vy        | number  | The y velocity of the particles  | 0       |
